<template>
    <div style="background-color: #f6f6f6;">
        <NavTop class="top">
            <div class="navtop-title">动态</div>
        </NavTop>
        <main ref="main">
            <!-- 下拉刷新 -->
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
                <SpaceList :spaceList="spaceList"/>
            </van-pull-refresh>
        </main>
        <!-- 回到顶部按钮 -->
        <div class="back-top" v-show="showBtn" @click="handleBackTop">
            <van-icon name="arrow-up" size=".6667rem"/>
        </div>
        <!-- 发布动态按钮 -->
        <div class="bar" @click="showPublishSpace=true">
            <van-icon name="plus" size=".6667rem"/>
        </div>
        <!-- 发布动态弹出框 -->
        <van-popup v-model="showPublishSpace" position="bottom" :style="{ height: '90%' }">
            <PublishSpace @cancel="closeShowPublishSpace" @onRefresh="onRefresh"/>
        </van-popup>
        <Tabbar/>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop'
import Tabbar from '@/components/Tabbar'
import PublishSpace from '@/components/PublishSpace'
import SpaceList from '@/components/SpaceList'
import { reqGetSpaceList } from '@/api'
import { mapState } from 'vuex'
import { formatDate } from '@/utils'
export default {
    components: {
        NavTop,
        Tabbar,
        PublishSpace,
        SpaceList
    },
    data() {
        return {
            isLoading: false,
            imgItemHeight: 0,
            showBtn: false,  // 回到顶部按钮（隐藏）
            scrollTop: 0,
            timer: null,
            showPublishSpace: false,
            spaceList: []
        }
    },
    computed: {
        ...mapState({
            userId: state => state.login.userInfo._id
        })
    },
    methods: {
        // 下拉刷新事件回调
        onRefresh() {
            this.getSpaceList({loading: true})
        },
        // 回到顶部按钮
        showBackTopBtn() {
            let scrollTop = this.$refs.main.scrollTop
            this.scrollTop = scrollTop
            if (scrollTop > 900) {
                this.showBtn = true
            } else {
                this.showBtn = false
            }
        },
        // 回到顶部事件回调
        handleBackTop() {
            this.timer = setInterval(() => {
                let osTop = this.scrollTop
                let ispeed = Math.floor(-osTop / 2)
                this.$refs.main.scrollTop = osTop + ispeed
                if (osTop === 0) {
                    clearInterval(this.timer)
                }
            }, 30)
        },
        closeShowPublishSpace(e) {
            this.showPublishSpace = e
        },
        // 获取空间动态列表
        async getSpaceList({loading}) {
            if (loading) {
                this.isLoading = true
            }
            let userId = this.userId
            let res = await reqGetSpaceList({userId})
            if (res.status === 200) {
                res.data.forEach(i => {
                    i.time = formatDate(i.time)
                })
                this.spaceList = res.data
            }
            if (loading) {
                this.isLoading = false
            }
        }
    },
    mounted() {
        this.getSpaceList({loading: false})
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.showBackTopBtn, true)
    },
    watch: {
        spaceList() {
            window.addEventListener('scroll', this.showBackTopBtn, true)
        }
    }
}
</script>

<style lang="less" scoped>
.top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
main {
    width: 100%;
    height: 100vh;
    padding: 1.3333rem 0;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
main::-webkit-scrollbar {
    display: none;
}
.space-content {
    width: 100%;
    min-height: 100vh;
    &>li {
        width: 100%;
        background-color: #fff;
        padding: .4rem .3333rem;
        box-sizing: border-box;
        margin-bottom: .2667rem;
        .user-info {
            width: 100%;
            height: 1.0667rem;
            display: flex;
            align-items: center;
            margin-bottom: .4rem;
            .user-pic {
                width: 1.0667rem;
                height: 1.0667rem;
                border-radius: 50%;
                overflow: hidden;
                margin-right: .3333rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .user {
                display: flex;
                flex: 1;
                height: 100%;
                flex-direction: column;
                justify-content: space-around;
                .user-nick {
                    font-size: .4rem;
                }
                .time {
                    font-size: 0.3333rem;
                    color: #858585;
                }
            }
            .del-space {
                font-size: .4667rem;
                align-self: flex-start;
            }
        }
        .space-text {
            font-size: .4rem;
            line-height: .5333rem;
            margin-bottom: .4rem;
        }
        .pic-content {
            width: 100%;
            margin-bottom: .1333rem;
            display: flex;
            flex-wrap: wrap;
            li {
                width: 33.33333%;
                height: 3.0667rem;
                overflow: hidden;
                padding: .0667rem;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: .2rem;
                .img-content {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }
    }
}
.back-top {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #fff;
    border-radius: 50%;
    position: fixed;
    right: .4rem;
    bottom: 3.3333rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #858585;
    box-shadow: .04rem .04rem .2667rem rgba(0,0,0,.5);
}
.bar {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #4dc0ff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: fixed;
    right: .4rem;
    bottom: 1.7333rem;
}
</style>

<style>
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
.van-overlay {
    background-color: rgba(0,0,0,.8);
}
.van-dialog__confirm, .van-dialog__confirm:active {
    color: #4dc0ff;
}
</style>